<!--
 * @Author: 涵崽
 * @Date: 2023-12-06 15:59:58
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-12-06 16:00:08
 * @Description: 微信：1045654
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="text">%</div>
        <div class="content-wraper">
            <div class="round"></div>
            <ul class="chassis">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        let precent = 0

        const el = document.querySelector('.text')

        let timer = null

        clearInterval(timer)
        timer = setInterval(() => {
            precent= +(precent + 0.1).toFixed(1)
            if(precent > 100){
                clearInterval(timer)
                return
            }
            el.innerText = precent + '%'
        }, 200)
    </script>
</body>
</html>